<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>视频分发</title>
    <link rel="icon" href="./favicon.png" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 用户信息 -->
    <div id="spff">
      <!-- top -->
      <div class="top">
        <div class="text">你好,欢迎来到Feijiu网</div>
      </div>
      <!-- header -->
      <header>
        <div class="content">
          <img src="./images/header-1.png" class="img-header-1" />
          <img src="./images/header-2.png" class="img-header-2" />
        </div>
      </header>
      <section class="page-container">
        <!-- 全平台发布视频 -->
        <div class="panel panel-form">
          <div class="panel-title">全平台发布视频</div>
          <form action="#">
            <!-- 已选择视频 -->
            <div id="videoBox" hidden>
              <div class="video-box">
                <div class="video-img">
                  <video id="video" src=""></video>
                  <img
                    id="buttonPlay"
                    src="./images/icon-play.png"
                    class="icon-play"
                    style="cursor: pointer"
                  />
                  <p id="videoTime" class="text-time">00:00</p>
                </div>
                <div id="buttonDelete" class="button-delete">删除</div>
              </div>
            </div>
            <!-- 未选择视频 -->
            <div id="uploadBox">
              <div class="upload-box">
                <img src="./images/icon-video.png" class="icon-video" />
                <p class="text-1">点击或拖拽文件到此处上传</p>
                <p class="text-2">视频文件大小应不超过30m</p>
                <input
                  type="file"
                  accept="video/*"
                  class="video-input"
                  id="videoInput"
                />
              </div>
              <p id="errorVideo" class="form-error" hidden>* 请选择视频</p>
            </div>
            <div class="form-item">
              <div class="label" for="title">作品标题</div>
              <div class="input-box">
                <input
                  type="text"
                  id="inputTitle"
                  name="title"
                  placeholder="标题"
                  maxlength="50"
                />
                <p id="titleCount" class="input-count">50</p>
              </div>
              <p id="errorTitle" class="form-error" hidden>* 请输入作品标题</p>
            </div>
            <div class="form-item">
              <div class="label" for="desc">视频简介</div>
              <div class="textarea-box">
                <textarea
                  id="textareaDesc"
                  name="desc"
                  placeholder="简介"
                  maxlength="200"
                ></textarea>
                <p id="descCount" class="input-count">200</p>
              </div>
              <p id="errorDesc" class="form-error" hidden>* 请输入视频简介</p>
            </div>
            <div class="form-item">
              <div class="label" for="desc">选择平台</div>
              <div class="checkbox-box">
                <div class="checkbox-item">
                  <div class="checkbox checked" data-type="kuaishou"></div>
                  <div class="info">
                    <img
                      src="./images/logo-kuaishou.png"
                      class="img-kuaishou"
                    />
                  </div>
                </div>
                <div class="checkbox-item">
                  <div class="checkbox disabled" data-type="shipinhao"></div>
                  <div class="info">
                    <img src="./images/logo-shipin.png" class="img-shipin" />
                    <p class="pingtai-text">
                      (暂未授权该平台，<a href="http://www.feijiu.net">去授权</a
                      >)
                    </p>
                  </div>
                </div>
              </div>
              <p id="errorPlatform" class="form-error" hidden>* 请选择平台</p>
            </div>
          </form>
          <div id="buttonPublish" class="form-button">立即发布</div>
        </div>
      </section>

      <!-- 视频弹窗 -->
      <div id="videoPopup" class="video-popup">
        <div class="video-popup-content">
          <span class="close-popup" id="closePopup">&times;</span>
          <video id="popupVideo" controls></video>
        </div>
      </div>
    </div>
    <!-- TODO footer需要替换 -->
    <footer class="temp-footer"></footer>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
